<template>
  <div>
    <PageWrapper contentBackground :contentFullHeight="true">
      <BasicTable @register="registerTable">
        <template #toolbar>
          <a-button type="primary" preIcon="ion:add-outline" @click="handleCreate">{{
            t('common.create')
          }}</a-button>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'ion:add',
                label: t('common.create'),
                onClick: handleCreate.bind(null, record),
                auth: '',
              },
              {
                icon: 'ion:ios-compose-outline',
                label: t('common.detail'),
                onClick: handleEdit.bind(null, record),
                aUth: '',
              },
              {
                icon: 'ion:ios-trash-outline',
                danger: true,
                label: t('common.delete'),
                popConfirm: {
                  title: t('common.confirmDelete'),
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
                auth: '',
              },
            ]"
          />
        </template>
      </BasicTable>
    </PageWrapper>
    <!-- 模板详情弹窗 -->
    <createTemDetail @register="registerTemDetailModal" @success="reload()" />
  </div>
</template>

<script setup lang="ts">
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { tempDetailColumns, tempDetailSearch } from './tableData';
  import { useModal } from '/@/components/Modal';
  import createTemDetail from './createTemDetail.vue';

  const { t } = useI18n();

  function handleCreate() {
    openTemDetail(true, { isUpdate: false });
  }

  function handleEdit(record: Recordable) {
    openTemDetail(true, { record, isUpdate: true });
  }

  function handleDelete(record: Recordable) {
    console.log(record);
  }

  const [registerTemDetailModal, { openModal: openTemDetail }] = useModal();
  const [registerTable, { reload }] = useTable({
    title: '模板详情列表',
    //api: xxx,
    columns: tempDetailColumns(),
    formConfig: {
      labelWidth: 120,
      schemas: tempDetailSearch(),
      autoSubmitOnEnter: true,
    },
    rowKey: 'id',
    useSearchForm: true,
    showTableSetting: true,
    showIndexColumn: false,
    actionColumn: {
      width: 180,
      title: t('common.action'),
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });
</script>

<style scoped></style>
